<template>
  <Layout>
    <div>
      <el-card
        shadow="never"
        style="
          min-height: 400px;
          margin-bottom: 20px;
          padding: 0px 0px 20px 0px;
        "
      >
        <el-tabs v-model="activeTab" type="card" @tab-click="onSelect">
          <el-tab-pane
            :label="'粉丝 ' + followersTotal"
            name="followers"
            style="padding: 5px"
          >
            <div>
              <div v-if="$page.followers.edges.length">
                <el-row style="min-height: 200px">
                  <el-col
                    :span="8"
                    v-for="(item, index) in $page.followers.edges"
                    :key="'followers' + index"
                    style="padding: 10px"
                  >
                    <el-card
                      shadow="hover"
                      style="font-size: 13px; color: #606266; line-height: 20px"
                    >
                      <i class="el-icon-star-off"></i>&emsp;
                      <g-link class="nav__link" :to="`/user/social/details/${item.node.name}`">
                        {{ item.node.name }}
                      </g-link>
                      <br />
                      <i class="el-icon-message"></i>&emsp;
                      <a
                        :href="item.node.htmlUrl"
                        target="_blank"
                        style="text-decoration: none; cursor: pointer"
                        >TA的主页</a
                      >
                      <br />
                      <img
                        :src="item.node.avatarUrl"
                        style="width: 100%; border-radius: 5px; margin-top: 5px"
                      />
                    </el-card>
                  </el-col>
                </el-row>
                <div style="text-align: center; margin-top: 10px">
                  <Pager
                    class="pager"
                    :info="$page.followers.pageInfo"
                    nav-class="navigation"
                    link-class="page-link page-item"
                    activeLink-class="active"
                  />
                </div>
              </div>
              <div
                style="
                  min-height: 300px;
                  margin-bottom: 20px;
                  padding: 20px 0px 20px 0px;
                  text-align: center;
                "
                v-else
              >
                <font style="font-size: 30px; color: #dddddd">
                  <b>(￢_￢) 没有一个粉丝</b>
                </font>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            :label="'关注 ' + followingTotal"
            name="following"
            style="padding: 5px"
          >
            <div>
              <div v-if="$page.following.edges.length">
                <el-row style="min-height: 200px">
                  <el-col
                    :span="8"
                    v-for="(item, index) in $page.following.edges"
                    :key="'following' + index"
                    style="padding: 10px"
                  >
                    <el-card
                      shadow="hover"
                      style="font-size: 13px; color: #606266; line-height: 20px"
                    >
                      <i class="el-icon-star-off"></i>&emsp;
                      <g-link class="nav__link" :to="`/user/social/details/${item.node.name}`">
                        {{ item.node.name }}
                      </g-link>
                      <br />
                      <i class="el-icon-message"></i>&emsp;
                      <a
                        :href="item.node.htmlUrl"
                        target="_blank"
                        style="text-decoration: none; cursor: pointer"
                        >TA的主页</a
                      >
                      <br />
                      <img
                        :src="item.node.avatarUrl"
                        style="width: 100%; border-radius: 5px; margin-top: 5px"
                      />
                    </el-card>
                  </el-col>
                </el-row>
                <div style="text-align: center; margin-top: 10px">
                  <Pager
                    class="pager"
                    :info="$page.following.pageInfo"
                    nav-class="navigation"
                    link-class="page-link page-item"
                    activeLink-class="active"
                  />
                </div>
              </div>
              <div
                style="
                  min-height: 300px;
                  margin-bottom: 20px;
                  padding: 20px 0px 20px 0px;
                  text-align: center;
                "
                v-else
              >
                <font style="font-size: 30px; color: #dddddd">
                  <b>(￢_￢) 还没有关注一个人</b>
                </font>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </Layout>
</template>

<page-query>
  query ($page: Int) {
    followers: allFllower (perPage: 9, page: $page) @paginate {
      pageInfo {
        totalPages
        currentPage
      }
      edges {
        node {
            id
            name
          avatarUrl
          htmlUrl
        }
      }
    }
    following: allFllowing (perPage: 9, page: $page) @paginate {
      pageInfo {
        totalPages
        currentPage
      }
      edges {
        node {
            id
            name
          avatarUrl
          htmlUrl
        }
      }
    }
  }
</page-query>

<script>
import { Pager } from "gridsome";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      activeTab: "followers",
    };
  },
  components: {
    Pager,
  },
  computed: {
    ...mapGetters(["githubUsername", "followersTotal", "followingTotal"]),
  },
  methods: {
    onSelect() {
      this.$router.push({
        path: '/user/social',
      })
    },
  }
};
</script>
<style>
.pager {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pager .active {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.pager .page-link {
  display: flex;
  width: 32px;
  height: 32px;
    justify-content: center;
    align-items: center;
}
</style>